<template>
  <div class="bc" v-bind:style="{'height':clientHeight + 'px'}">
    <transition
      enter-active-class="animated fadeInLeft"
      @enter="handleEnter"
     >
    <personHead v-show ="isLoad"></personHead>
    </transition>
    <transition
      enter-active-class="animated fadeInLeft"
      @enter="handleEnter2"
     >
    <devMsg :flowMsg="flowMsg"  v-show ="isLoad2"></devMsg>
    </transition>
   <transition
      enter-active-class="animated fadeInLeft"
    >
    <error :errorNum="errorNum" v-show ="isLoad3"></error>
    </transition>
  </div>
</template>

<script>
/* 如果没异常则展示异常 */
import personHead from '../../components/person/head'
import devMsg from '../../components/person/devMsg'
import error from '../../components/person/error'
import { FLOWINFO, EXCEDEV } from '../../api/request'
import { Toast } from 'vue-ydui/dist/lib.rem/dialog'
export default {
  name: 'index',
  components: {personHead, devMsg, error},

  data () {
    return {
      clientHeight: document.documentElement.clientHeight,
      isLoad: false,
      isLoad2: false,
      isLoad3: false,
      flowMsg: {
        useFlows: 0,
        totalUseFlow: 1
      },
      errorNum: 0
    }
  },
  methods: {
    handleEnter: function (el, done) {
      setTimeout(() => {
        this.isLoad2 = true
        done()
      }, 1000)
    },
    handleEnter2: function (el, done) {
      setTimeout(() => {
        FLOWINFO(this.$store.getters.uid).then(res => {
          if (res.data.code === 200) {
            this.flowMsg = res.data
          } else {
            Toast({mes: res.data.msg, timeout: 1000})
          }
        })
      }, 1000)
      setTimeout(() => {
        EXCEDEV(this.$store.getters.uid).then(res => {
          if (res.data.code === 200) {
            this.errorNum = res.data.num
            this.isLoad3 = true
          } else {
            Toast({mes: res.data.msg, timeout: 1000})
          }
        })
        done()
      }, 2000)
    }
  },
  mounted () {
    this.isLoad = true
  }
}
</script>

<style scoped>
  @import "../../assets/css/animate.min.css";
  .bc{
    background-color: #eff0f1;
    padding-top: 0.2rem;
  }

</style>
